<template>
  <div class="viewportDrawer-container" :class="[visible ? 'show' : 'hide']">
    <div class="viewportDrawer-body">
      <div class="header">
        视口<a-icon type="close" @click="handleClose()" />
      </div>
      <div class="body">
        <div class="add-view-btn" @click="handleAddViewPort()">
          <a-icon type="plus" />
          新增视口
        </div>
        <div class="viewport-list">
          <div class="empty-tip" v-if="viewportSource.length == 0">
            <a-empty :description="false" />
          </div>
          <div
            class="list-item"
            :class="activeIndex == index && 'active'"
            v-for="(item, index) in viewportSource"
            :key="index"
            @click="handleLocationViewport(item, index)"
          >
            <div class="name">
              <div class="name-text">
                {{ item.viewportName }}
              </div>
              <div class="operate">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>编辑</span>
                  </template>
                  <a-icon
                    type="edit"
                    @click.stop="handleEditorViewPort(item, index)"
                  />
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>更新</span>
                  </template>
                  <a-icon
                    type="retweet"
                    @click.stop="handleUpdateSnapshot(item, index)"
                  />
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>删除</span>
                  </template>
                  <a-icon
                    type="delete"
                    @click.stop="handleDelete(item, index)"
                  />
                </a-tooltip>
              </div>
            </div>
            <div class="thumbnail">
              <img :src="item.viewportImage" v-if="item.viewportImage" />
            </div>
            <div class="desc">
              <div class="desc-body" :title="item.viewportDesc">
                {{ item.viewportDesc }}
              </div>
            </div>
            <div class="bottom">
              <div class="user">
                <a-icon type="user" />
                {{ item.modifier }}
              </div>
              <div class="date">{{ item.modifyTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增视口弹窗 -->
    <addViewportModal
      :visible.sync="addModal.visible"
      :operateType="operateType"
      :viewportData="viewportData"
    ></addViewportModal>
  </div>
</template>
<script>
//视口
import addViewportModal from "./addViewportModal";
import { axios } from "@/utils/request";
export default {
  name: "viewportDrawer",
  inject: ["currentProject", "sceneSource"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: { addViewportModal },
  data() {
    return {
      addModal: {
        visible: false,
      },
      viewportSource: [],
      loading: false,
      operateType: 1,
      viewportData: {},
      activeIndex: null,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        } else {
          this.activeIndex = null;
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //查询列表数据
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        let { orgCode } = this.currentProject();
        let { sceneId } = this.sceneSource();
        axios
          .post(
            "/probusiness/bimViewport/getList",
            { proCode: orgCode, sceneId },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.viewportSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.viewportSource = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //定位视口
    handleLocationViewport(item = {}, index = 0) {
      let { camDir, camPos, camRotate } = item;
      this.activeIndex = index;
      try {
        var camLoc = new BlackHole3D.RECamLoc();
        camLoc.camPos = JSON.parse(camPos);
        camLoc.camRotate = JSON.parse(camRotate);
        camLoc.camDir = JSON.parse(camDir);
        var locDelay = 0;
        var locTime = 0;
        BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
      } catch (error) {}
    },

    //编辑
    handleEditorViewPort(item, index) {
      this.viewportData = item;
      this.operateType = 2;
      this.addModal.visible = true;
    },

    //更新
    handleUpdateSnapshot(item, index) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确认更新该视口的快照吗？",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          let {
            uuid,
            viewportName,
            proCode,
            projid,
            viewportImage,
            viewportDesc,
          } = item;
          let { sceneId } = this.sceneSource();
          let { camDir, camPos, camRotate } = BlackHole3D.Camera.getCamLocate();
          let snapshot = "";
          const canvas = document.getElementById("blackHoleCanvas");
          if (canvas) {
            const context = canvas.getContext("2d");
            const dataUrl = canvas.toDataURL();
            snapshot = dataUrl;
          }
          axios
            .post(
              `/probusiness/bimViewport/update`,
              {
                uuid,
                sceneId,
                proCode,
                viewportName,
                projid,
                viewportImage: snapshot ?? viewportImage,
                viewportDesc,
                camDir: JSON.stringify(camDir),
                camPos: JSON.stringify(camPos),
                camRotate: JSON.stringify(camRotate),
              },
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              let { statusCode } = res;
              if (statusCode == 200) {
                that.$message.success("更新成功！");
                that.$set(
                  that.viewportSource[index],
                  "viewportImage",
                  snapshot ?? viewportImage
                );
                that.$set(
                  that.viewportSource[index],
                  "camDir",
                  JSON.stringify(camDir)
                );
                that.$set(
                  that.viewportSource[index],
                  "camPos",
                  JSON.stringify(camPos)
                );
                that.$set(
                  that.viewportSource[index],
                  "camRotate",
                  JSON.stringify(camRotate)
                );
              } else {
                that.$message.error("更新失败，请稍后重试！");
              }
            })
            .catch((_) => {})
            .finally((_) => {});
        },
      });
    },

    //删除
    handleDelete(item, index) {
      let that = this;
      let { uuid } = item;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$get(`/probusiness/bimViewport/deleteData?uuid=${uuid}`)
            .then((res) => {
              let { statusCode } = res;
              if (statusCode == 200) {
                that.$message.success("删除成功！");
                that.viewportSource = that.viewportSource.filter(
                  (_, i) => i != index
                );
              } else {
                this.$message.error("删除失败，请稍后重试！");
              }
            })
            .catch((_) => {})
            .finally((_) => {});
        },
      });
    },

    //新增视口
    handleAddViewPort() {
      this.viewportData = {};
      this.operateType = 1;
      this.addModal.visible = true;
    },

    //关闭
    handleClose() {
      this.$emit("update:visible", false);
      this.$emit("close", false);
    },
  },
};
</script>
<style lang="less" scoped>
.viewportDrawer-container {
  position: absolute;
  width: 300px;
  height: 100%;
  top: 0;
  pointer-events: none;
  transition: 0.3s;
  right: 8px;
  box-sizing: border-box;
  padding: 16px 0 20px 0;
  z-index: 99;
  &.hide {
    right: -100%;
  }
  .viewportDrawer-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    pointer-events: all;
    .header {
      flex-shrink: 0;
      height: 36px;
      background: #f0f0f0;
      border-radius: 6px 6px 0px 0px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;
      font-size: 16px;
      color: #333333;
      position: relative;
      .anticon-close {
        color: #8c8c8c;
        font-size: 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
    }
    .body {
      flex: 1;
      background: #fff;
      padding: 16px 0 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .add-view-btn {
        flex-shrink: 0;
        height: 32px;
        background: rgba(22, 119, 255, 0.1);
        border-radius: 4px 4px 4px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1677ff;
        font-size: 14px;
        cursor: pointer;
        margin: 0 16px 16px 16px;
        .anticon {
          font-size: 10px;
          margin: 2px 5px 0 0;
        }
      }
      .viewport-list {
        flex: 1;
        overflow: auto;
        padding: 0 16px 0 16px;
        position: relative;
        .empty-tip {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .list-item {
          height: 240px;
          background: #ffffff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #d9d9d9;
          margin-bottom: 10px;
          padding: 0 10px 10px 10px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          &.active {
            border: 1px solid #1677ff;
          }
          &:hover {
            .name {
              .operate {
                display: flex;
              }
            }
          }
          .name {
            height: 36px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333;
            letter-spacing: 1px;
            .name-text {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .operate {
              flex-shrink: 0;
              color: #8c8c8c;
              margin-left: 10px;
              display: none;
              .anticon {
                font-size: 16px;
                cursor: pointer;
                &:hover {
                  color: #1677ff;
                }
                &:nth-child(2) {
                  margin: 0 6px;
                }
              }
            }
            // <div class="name-text">地下停车库-正视图</div>
            //   <div class="operate">
            //     <a-icon type="edit" />
            //     <a-icon type="retweet" />
            //     <a-icon type="delete" />
            //   </div>
          }
          .thumbnail {
            height: 120px;
            border-radius: 4px 4px 4px 4px;
            overflow: hidden;
            background: rgba(140, 140, 140, 0.1);
            margin-bottom: 10px;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .desc {
            flex: 1;
            .desc-body {
              display: -webkit-box;
              display: -moz-box;
              -webkit-line-clamp: 2;
              -moz-line-clamp: 2;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              overflow: hidden;
              color: #666;
              font-size: 12px;
              line-height: 20px;
            }
          }
          .bottom {
            display: flex;
            margin-top: 6px;
            font-size: 12px;
            color: #8c8c8c;
            .user {
              margin-right: 14px;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                height: 10px;
                width: 1px;
                top: 50%;
                transform: translateY(-50%);
                background: #8c8c8c;
                right: -8px;
              }
            }
            .date {
            }
          }
        }
      }
    }
  }
}
</style>
